<script lang="ts" setup>
  import { uniqueId } from 'lodash-es'

  const containerRef = ref<HTMLDivElement>()
  const width = ref(0)
  const height = ref(0)

  const path = computed(
    () =>
      `M5 5 L${width.value - 5} 5 L${width.value - 5} ${height.value - 5} L5 ${
        height.value - 5
      } Z`,
  )

  const flyPathId = `fly-box-path-${uniqueId()}`
  const radialGradientId = `radial-gradient-${uniqueId()}`
  const flyMaskId = `fly-mask-path-${uniqueId()}`

  onMounted(() => {
    width.value = containerRef.value?.clientWidth || 0
    height.value = containerRef.value?.clientHeight || 0
  })
</script>

<template>
  <div class="fly-box" ref="containerRef">
    <svg :width="width" :height="height">
      <defs>
        <path :id="flyPathId" :d="path" fill="none" />
        <radialGradient
          :id="radialGradientId"
          cx="50%"
          cy="50%"
          fx="100%"
          fy="50%"
          r="50%"
        >
          <stop offset="0%" stop-color="#fff" stop-opacity="1" />
          <stop offset="100%" stop-color="#fff" stop-opacity="0" />
        </radialGradient>
        <mask :id="flyMaskId">
          <circle cx="0" cy="0" r="50" :fill="`url(#${radialGradientId})`">
            <animateMotion
              dur="5s"
              :path="path"
              rotate="auto"
              repeatCount="indefinite"
            />
          </circle>
        </mask>
      </defs>
      <use :href="`#${flyPathId}`" stroke-width="1" stroke="#235fa7" />
      <use
        :href="`#${flyPathId}`"
        stroke-width="3"
        stroke="#4fd2dd"
        :mask="`url(#${flyMaskId})`"
      />
    </svg>
    <div class="fly-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .fly-box {
    position: relative;
    width: 100%;
    height: 100%;
    svg {
      position: absolute;
      left: 0;
      top: 0;
    }
  }
</style>
